<template>
	<view>
		<view class="tabbar-title">
			
				<v-tabs v-model="activeTab" bgColor="#F0F3F6" :fixed="true" :lineScale="0.2" :scroll="false" :tabs="tabs" activeFontSize="32rpx" fontSize="30rpx"></v-tabs>
		</view>
		<!-- 电梯信息-  相关联系人 -->
		<view class="" v-show="activeTab == 0">
			<ElevatorDetail :elevatorInfo="elevatorInfo" :elevatorId="elevatorInfo.elevatorId"></ElevatorDetail>
			
			
		</view>
		<!-- 故障列表 -->
		<view class="" v-show="activeTab == 1">
			<uni-card >
				<view class="main">
					<image :src="tiringDetail.avatar" mode=""></image> 
					<view class="">
						<view class="main-time">
							<text>负责人</text>
							<text>{{inspection.headMan}}</text>
						</view>
						<view class="main-time"> 
							<text>启动时间</text>
							<text>{{inspection.startTime}}</text>
						</view>
					</view>
					
				</view>
				<view class="">
					<view class="main-time mt20">
						<text>年检日期</text>
						<text>{{inspection.annualDate}}</text>
					</view>
					<view class="main-time mt20" v-if="types == 2">
						<text>完成时间</text>
						<text>{{inspection.completionTime}}</text>
					</view>
				</view>
			</uni-card>
			
			<uni-card>
				<view class="choose">
					<view class="choose-left">是否年检完成</view>
					<switch @change="switchChange($event,'checkThrough')" :checked="parmes.checkThrough == 0" :disabled="types == 2" />
					<!-- <view class="textTip" v-else>{{parmes.checkThrough == 1 ? '否' : '是'}}</view> -->
				</view>
				<view class="choose">
					<view class="choose-left">是否检查限速器</view>
					<switch @change="switchChange($event,'checkSpeedLimiter')" :checked="parmes.checkSpeedLimiter == 0" :disabled="types == 2" />
					<!-- <view class="textTip" v-else>{{parmes.checkSpeedLimiter == 1 ? '否' : '是'}}</view> -->
				</view>
			</uni-card>
			
			<uni-card>
				<textarea v-model="parmes.inspectionContext" placeholder="故障描述：" class="describe" maxlength="100" :disabled="types == 2" />
			</uni-card>
			<view class="tipText">
				<!-- 已输入<text>{{parmes.inspectionContext.length}}</text>/100 -->
			</view>
			<view class="addImage">
				<view class="Elevatorimage" v-if="!parmes.inspectionImg" @click="addElevator">+</view>
				<image class="Elevatorimage" :src="parmes.inspectionImg" mode="" @click="addElevator" v-else></image>
				<image src="@/static/img/polling/DelectIcon.png" mode="" @click.stop="parmes.inspectionImg = ''" class="DelectIcon"  v-if="parmes.inspectionImg && types == 1"></image>
				<view class="tips" v-if="types == 1">（上传一张年检图片）</view>
			</view>
			
			<view class="submits" @click="confir" v-if="types == 1">确定完成</view>
		</view>
	
		
	</view>
</template>

<script>
	import ElevatorDetail from '@/common/ElevatorDetail.vue'
	import {imgSet} from '@/serve/api/imgSet.js'
	import polling from "@/serve/api/polling.js";
	export default {
		components: {
			ElevatorDetail
		},
		data() {
			return {
				activeTab: 0,
				tabs: ['电梯信息', '年检详情'],
				contactInformation: [], // 相关联系人
				types:"",
				inspectionId: "", //电梯ID
				elevatorInfo: {},//电梯信息
				tiringDetail:{},//人物信息
				inspection:"",//车捡详情
				parmes:{
					checkSpeedLimiter:'',//是否检查限速器（0.是，1.否）   
					checkThrough:'',//   是否年检通过（0.是，1.否）  
					inspectionContext:"",//年检描述
					inspectionImg:"",//  年检图片
				},
			}
		},
		onLoad(e) {
			this.inspectionId = e.inspectionId
			this.types = e.types
			this.getElevatorDetail()

		},
		methods: {
			// 详情
			async getElevatorDetail() {
				// let 
				const res = await polling.selectAnnualDetails({
					inspectionId: this.inspectionId
				});
				this.elevatorInfo = res.data.data.elevator
				this.tiringDetail = res.data.data.user
				this.inspection = res.data.data.inspection
				Object.keys(this.parmes).forEach(item=>{
					this.parmes[item] = res.data.data.inspection[item]
				})
			},
			// 滑块 
			switchChange({detail},key){
				this.$set(this.parmes , key , detail.value ? 0 : 1)
				
			},
			// 上传图片
			async addElevator(){
				if(this.types == 1){
					const res = await imgSet("attachment/upload",{count: 1,})
					this.$set(this.parmes,"inspectionImg",res.data.url)
				}else{
					console.log(this.parmes.inspectionImg)
					uni.previewImage({
						current:1,	
						urls:[this.parmes.inspectionImg]
						
					})
				}
			},
			// 提交
			async confir(){
				if(!this.parmes.inspectionContext){
					this.tip("请输入故障描述")
					return
				}else if(!this.parmes.inspectionImg){
					this.tip("请上传图片年检图片")
					return
				}
				const res = await polling.confirmAnnualInspection({inspectionId:this.inspectionId,...this.parmes})
				if(res){
					var pages = getCurrentPages();
					var prevPage = pages[pages.length - 2];
					//#ifdef APP-PLUS
						prevPage.$vm.getByStatus(this.types,true)
					// #endif
					//#ifdef H5
						prevPage.getByStatus(this.types,true)
					// #endif
					uni.navigateBack({})
				}
			},
			// 
			async getFaultList() {
				
			},
		


		},
		
	}
</script>

<style scoped lang="scss">

	.v-tabs__container {
		height: 200rpx !important;
		line-height: 100rpx !important;
	}

	.uni-card {
		width: 670rpx;
		/* height: 820rpx; */
		background: #FFFFFF;
		box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(52, 54, 61, 0.05);
		border-radius: 16rpx;
		margin: 0 auto;
		border: none;
		margin-bottom: 30rpx;
	}

	.v-tabs {
		height: 154rpx;
		background-color: #F0F3F6;
	}
	.describe{
		width: 100%;
		height: 226rpx;
		font-size: 24rpx;
	}
	.tipText{
		padding: 5px 43rpx;
		color: #989BA6;
		text-align: right;
		font-size: 24rpx;
		text{
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	
	
	/* 内容区域 */
	.main{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 1rpx solid #E2E6EF;
		padding-bottom: 15rpx;
	}
	.main image{
		width: 80rpx;
		height: 80rpx;
		background: #E2E6EF;
		border: 4rpx solid #F0F3F6;
		border-radius: 50%;
		margin-right: 18rpx;
	
	}
	.main-time{
		font-size: 24rpx;
		color: #34363D;
	}
	.main-time text:nth-child(1){
		color: #989BA6;
		width: 110rpx;
		display: inline-block;
	}
	.main-time text:nth-child(2){
		margin-left: 20rpx;
	}
	.mt20{
		margin-top: 20rpx;
	}
	
	.choose{
		height: 100rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		/* text-align: center; */
		border-bottom: 1px solid #E2E6EF;
		switch{
			transform:scale(0.8) ;
		}
		.textTip{
			color: #017EFE;
		}
	}
	.choose-left{		
		font-size: 30rpx;
		font-weight: bold;
		text-align: left;
		color: #34363D;
		
	}
	
	.choose:last-child{
		border: none;
	}
	
	.addImage{
		display: flex;
		align-items: flex-end;
		position: relative;
		width: 670rpx;
		margin: 0 auto;
		.Elevatorimage{
			width: 200rpx;
			height: 200rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			font-size: 100rpx;
			text-align: center;
			line-height: 200rpx;
			color: #017EFE;
		}
		.DelectIcon{
			position: absolute;
			width: 48rpx;
			height: 48rpx;
			left: 175rpx;
			top: -25rpx;
		}
		.tips{
			font-size: 30rpx;
			color: #989BA6;
		}
	}
	.submits{
		width: 670rpx;
		height: 104rpx;
		background: #017EFE;
		box-shadow: 0px 10rpx 15rpx 0px rgba(1, 126, 254, 0.2);
		border-radius: 52rpx;
		line-height: 104rpx;
		text-align: center;
		margin:70rpx auto 0 ;
		font-size: 36rpx;
		color: #FFFFFF;
	}
</style>
